<template>
    <section>
        <el-row>
            <div class="app-container" style="width: 700px">
                <el-calendar v-model="date">
                    <template slot="dateCell" slot-scope="{date, data }">
                        <div>
                            <el-row>
                                <el-col :span="16">
                                    <div class="solar">
                                        {{ data.day.split('-')[2] }}
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div v-if="workdayList.includes(data.day)" class="workday">班</div>
                                    <div v-else-if="holidayList.includes(data.day)" class="holiday">休</div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-calendar>
            </div>
        </el-row>
        <p style="position: absolute;bottom: 8px;font-size:12px;left: 40%">
            Copyright © 2024-2025 年年有余（浙江）文化科技有限公司 |
            <a href="http://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">浙ICP备2020041450号</a>
        </p>
    </section>
</template>

<script>

import calendar from '@/libs/calendar';
export default {
    data(){
        return {
            // 遮罩层
            loading: true,
            date: new Date(),
            holidayList:[//假日
                "2025-01-01","2025-01-28","2025-01-29","2025-01-30","2025-01-31","2025-02-01","2025-02-02","2025-02-03","2025-02-04",
                "2025-04-04","2025-04-05","2025-04-06","2025-05-01","2025-05-02","2025-05-03","2025-05-04","2025-05-05","2025-05-31",
                "2025-06-01","2025-06-02","2025-10-01","2025-10-02","2025-10-03","2025-10-04","2025-10-05","2025-10-06","2025-10-07",
                "2025-10-08","2026-01-01","2026-01-02","2026-01-03","2026-02-15","2026-02-16","2026-02-17","2026-02-18","2026-02-19",
                "2026-02-20","2026-02-21","2026-02-22","2026-02-23","2026-04-04","2026-04-05","2026-04-06","2026-05-01","2026-05-02",
                "2026-05-03","2026-05-04","2026-05-05","2026-06-19","2026-06-20","2026-06-21","2026-09-25","2026-09-26","2026-09-27",
                "2026-10-01","2026-10-02","2026-10-03","2026-10-04","2026-10-05","2026-10-06","2026-10-07","2027-01-01"
            ],
            workdayList:[//工作日
                "2025-01-26","2025-02-08","2025-04-27","2025-09-28","2025-10-11","2026-01-04","2026-02-14","2026-02-28","2026-05-09",
                "2026-09-20","2026-10-10"
            ],
            // 弹出层标题
            title: "节假日设置",
            // 是否显示弹出层
            open: false,
            form:{},
            queryParams: {
                theDay: null,
                holidayType: null,
                startTime: null,
                endTime: null,
            },
            // 表单校验
            rules: {
                holidayType: [
                    { required: true, message: "请选择类型", trigger: "blur" }
                ],
            },
        }
    },
    created() {
        this.user = this.$store.getters.user;
    },
    methods:{
        isFestival(slotDate, slotData) {
            let solarDayArr = slotData.day.split('-');
            let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

            // 公历节日\农历节日\农历节气
            let festAndTerm = [];
            festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
            festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
            festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
            festAndTerm = festAndTerm.join('')

            return festAndTerm != ''
        },
        solarDate2lunar(solarDate) {
            var solar = solarDate.split('-')
            var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])

            let lunarMD = lunar.IMonthCn + lunar.IDayCn;
            // 公历节日\农历节日\农历节气
            let festAndTerm = [];
            festAndTerm.push(lunar.festival == null ? '' : ' ' + lunar.festival)
            festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
            festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
            festAndTerm = festAndTerm.join('')

            return festAndTerm == '' ? lunarMD : festAndTerm

        },
    }
}
</script>

<style>
/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n+2) .solar {
    color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
    color: #606266;
    font-size: 12px;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
    color: green;
    font-size: 12px;
}
/**节假日背景设置为绿色 */
.el-calendar-table .holiday {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 0px;
    font-size: 16px;
    color: #fff;
    background-color: #ed4014;
}
.el-calendar-table .workday {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 0px;
    font-size: 16px;
    color: #fff;
    background-color: #606266;
}

.el-calendar-table td.is-today {
    background-color: #a9cff5;
}
</style>
